<template>
  <div class="app-container tableList">
    <table v-for="(item,index) in orderGoodriesList" :key="index" class="ordermain">
      <tr style="margin-bottom: 0;height: 115px;margin: 0;">
        <td style="margin-bottom: 0;padding: 0;">
          <div style="display: flex;">
            <div style="width: 275px;font-size: 11px;">
              <p style="margin: 0;height: 44px;display: flex;justify-content: center;flex-direction: column;width: 268px;">
                <span style="width: 100%;font-weight: 800;font-size: 13px;display: block;">品名：{{item.goodsName}}({{ item.goodsSpecs }})</span>
                <!-- <span style="width: 100%;font-weight: 800;font-size: 13px">品名：配送地址：湖北省武汉市洪山区洪山街道双李路57号双建社区彩虹郡1期 3-1-505湖北省武汉市洪山区洪山街道双李路57号双建社区彩虹郡1期 3-1-505</span> -->
              </p>
              <p style="line-height: 17px;font-weight: 800;font-size: 17px;margin: 0;">后台单号：{{ item.xmbzNo }}</p>
              <p style="line-height: 1.1;margin: 0;">平台单号：{{ item.platformOrderId }}</p>
              <p style="display: flex;justify-content: space-between;font-size: 13px;line-height: 1;font-weight: 800;margin: 0;">
                <span>配送区域：{{ item.branchWarehouse }}</span>
                <!-- <span>规格：{{ item.goodsSpecs }}</span> -->
              </p>
              <p style="line-height: 1.1;display: flex;font-size: 11px;justify-content: space-between;flex-wrap: wrap;padding-bottom: 0;margin: 0;">
                <!-- <span>蛋糕编码:&nbsp;{{ item.id }}</span> -->
                <span>蛋糕编码:&nbsp;{{ item.id }}</span>
                <span>生产日期:&nbsp;{{ item.deliveryStartTime.slice(0,10) }}</span>
                <span>配送时间:&nbsp;{{ item.deliveryStartTime.slice(0,16) }}~{{ item.deliveryEndTime.slice(11,16) }}</span>
              </p>
            </div>
            <div style="margin-left: 1px;font-size: 11px;padding-top: 10px;">
              <div id="qrCode" :data-orderId="item.orderId" :data-orderDetailId="item.id" :data-productionState="item.productionState" ref="qrCodeDiv"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr style="height: 36px;">
        <td>
          <p style="line-height: 1;font-size: 12px">配送地址：{{ item.receiverAddress}}</p>
        </td>
      </tr>
      <tr style="height: 8px;">
        <td>
          <p style="display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0;">
            <span style="line-height: 1;font-size: 12px">订单来源：{{ item.channelName}}</span>
            <span style="margin-left: 8px;">保质期：冰箱冷藏，最晚不超过4小时</span>
          </p>
        </td>
      </tr>
      <tr style="height: 10px;">
        <td>
          <p style="margin: 0;">
            <!-- <span>配料：{{ item.material }}</span> -->
            <span style="line-height: .8;font-weight: 800;font-size: 13px;">祝福语：{{ item.blessings }}</span>
          </p>
        </td>
      </tr>
      <tr style="height: 10px;">
        <td style="font-size:10px;line-height: .5;margin: 0;">
          <p>储藏方式：0℃ ~ 5℃常温放置请勿超过30分钟</p>
        </td>
      </tr>
    </table>
  </div>
</template>

<script src="https://www.jq22.com/jquery/vue.min.js"></script>

<script src='js/JsBarcode.all.min.js'></script>）

<script>
import QRCode from 'qrcodejs2';
// var JsBarcode = require('jsbarcode');
export default {
  props: {
    orderGoodriesList: {
      required: true
    }
  },
  data() {
    return {
      getNowTime: ''
    }
  },
  mounted() {
  },
  created() {
    this.getDate();
  },
  watch: {
    'orderGoodriesList'(){
      // console.log(this.orderGoodriesList,'this.orderGoodriesList',this.$refs,'02.$refs.qrCodeDiv')
      this.$nextTick(function () {
        this.$refs.qrCodeDiv.forEach((item,index) => {
          this.$refs.qrCodeDiv[index].innerHTML = "";
        })
        this.creatQrCode();
      })
    }
  },
  methods: {
    creatQrCode() {
      this.$refs.qrCodeDiv.forEach((item,index) => {
        var qrcode =  new QRCode(this.$refs.qrCodeDiv[index], {
          text: `{"orderId":${this.orderGoodriesList[index].orderId},"orderDetailId":${this.orderGoodriesList[index].id},"status":${this.orderGoodriesList[index].productionState}}`,
          // text: `{"orderId":${this.$refs.qrCodeDiv[index].dataset.orderid},"orderDetailId":${this.$refs.qrCodeDiv[index].dataset.orderdetailid},"status":${this.$refs.qrCodeDiv[index].dataset.productionstate}}`,
          width: 80,
          height: 80,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })
        // console.log('二维码',qrcode._htOption.text)
      })
    },
    getDate() {
      let nowYear = new Date().getFullYear();
      let nowMonth = (new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() + 1) : (new Date().getMonth() +
        1);
      let nowDate = new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate();
      let nowHours = new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours();
      let nowMinutes = new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes();
      // console.log(e.currentTarget.dataset.time,nowYear + '-' + nowMonth + '-' + nowDate + ' ' + nowHours + ':' + nowMinutes)
      let nowTime = nowYear + '年' + nowMonth + '月' + nowDate + '日';
      this.getNowTime = nowTime;
      // console.log('',this.CookieTemplateList.manufactureDate)
    }
  },
}
</script>

<style lang='scss'>
.app-container {
  .ordermain {
    p {
      font-size: 11px;
      line-height: .8;
    }

  }
}
</style>
